
// 1、安装  webpack-dev-server
// 2、package.json 里面  "dev": "webpack-dev-server  --config  ./config/webpack.config.js --env development", 
// 3、成功 npm  run dev  

const path = require('path')
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入分离 css 文件的 模块
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 使用插件压缩css 代码
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
// 使用插件压缩 js 代码 (生产模式)
const TerserPlugin = require('terser-webpack-plugin')

// webpack的 依赖图
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// webpack安装vue组件   
// 1、cnpm install vue-loader vue-template-compiler  -d
// 2、卸载 npm uninstall vue-loader
// 3、package.json 里面  "vue-loader": "^15.9.2", 
// 4、卸载node包 
// 5、 npm install 成功  
const VueLoaderPlugin = require('vue-loader/lib/plugin')

// 导入清除插件, 可以在每次打包之前, 清除 dist目录的内容
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 底下都是  后缀名不同的一些配置  在plugins 来配置rules
const toml = require('toml')
const yaml = require('yaml')
const json5 = require('json5')
// const { webpack } = require('webpack')
// const { NOTIMP } = require('dns')

// function resolve (dir) {
//   return path.join(__dirname, dir)
// }
// 配置webpack的配置文件, 需要将配置的对象导出, 给webpack使用
module.exports = {

  // 入口 entry, 从哪个文件开始打包
  entry: {
    main: './src/main.js',
    index: './src/index.js',
    // chunks:[],//指定的 js 放在index.html 中去
  },
  // 出口 output, 打包到哪里去
  output: {
    // 打包输出的目录 (输出的目录必须是一个绝对路径)
    path: path.resolve(__dirname, '../dist'),
    // 删除不需要的旧文件
    clean: true,
    // assetModuleFilename和generator  优先级更高的是(generator)
    assetModuleFilename: 'images/[contenthash][ext]'
  },

  externals: {
    jquery: 'jQuery'
  },

  // // 用@代表根路径的src
  resolve: {
    alias: {
      //这里注意他的路径 ../src
      "@": path.resolve(__dirname, "../src"), // @ 替换根目录
    },
    //语法后缀优先级
    // extensions: ['js', 'jsx', 'vue']
  },

  plugins: [
    // 指定的模板  public中的index.html 
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',  //filename 如果 不设置  就会默认都在index.html中去生成js
      // 指定 Script 标签位置
      inject: 'body'
    }),

    // CSS文件分离
    new MiniCssExtractPlugin({
      // [contenthash]系统自定义Name
      filename: 'styles/[contenthash].css'
    }),

    // 依赖图
    new BundleAnalyzerPlugin(),

    // vue的loader
    new VueLoaderPlugin(),

    // 清除dist目录的插件
    new CleanWebpackPlugin(),

  ],

  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource',
        generator: {
          filename: 'images/[contenthash][ext]'
        }
      },

      {
        test: /\.svg$/,
        type: 'asset/inline'
      },

      {
        test: /\.txt$/,
        type: 'asset/source'
      },

      {
        test: /\.jpg$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 * 1024
          }
        }
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 在 head 中创建 style 标签
          'style-loader',
          // 将 css 文件整合到 js 文件中
          'css-loader',
          // 编译 sass 文件为 css 文件
          'sass-loader'
        ]
      },
      {
        test: /\.(css|less)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      },

      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        type: 'asset/resource'
      },

      {
        test: /\.(csv|tsv)$/,
        use: 'csv-loader'
      },

      {
        test: /\.xml$/,
        use: 'xml-loader'
      },

      {
        test: /\.toml$/,
        type: 'json',
        parser: {
          parse: toml.parse
        }
      },

      {
        test: /\.yaml$/,
        type: 'json',
        parser: {
          parse: yaml.parse
        }
      },

      {
        test: /\.json5$/,
        type: 'json',
        parser: {
          parse: json5.parse
        }
      },

      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              [
                '@babel/plugin-transform-runtime'
              ]
            ]
          }
        }
      },
      // (5) vue-loader的配置说明
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },

  optimization: {
    minimizer: [
      // 使用插件压缩css 代码
      new CssMinimizerPlugin(),
      // 使用插件压缩 js 代码 (生产模式)
      new TerserPlugin(),
    ],

    // 缓存第三方库 比如 JQuery
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',//取的别名
          chunks: 'all'
        }
      }
    }
  }
}